<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>记忆翻牌小游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            touch-action: manipulation;
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f0f0;
            min-height: 100vh;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .game-container {
            max-width: 500px;
            width: 100%;
        }
        .game-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }
        .memory-board {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            perspective: 1000px;
        }
        .memory-card {
            height: 100px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.5s;
            cursor: pointer;
        }
        .memory-card.flip {
            transform: rotateY(180deg);
        }
        .memory-card.matched .front-face {
            background-color: #88ff88;
        }
        .front-face, .back-face {
            width: 100%;
            height: 100%;
            padding: 10px;
            position: absolute;
            border-radius: 10px;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .front-face {
            background-color: white;
            transform: rotateY(180deg);
            font-size: 2rem;
        }
        .back-face {
            background-color: #4a89dc;
            color: white;
            font-size: 1.5rem;
        }
        .restart-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4a89dc;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .restart-btn:hover {
            background-color: #3a79cc;
        }
        .game-over {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        .game-over-content {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
        }
        .game-over h2 {
            margin-bottom: 20px;
        }
        @media (max-width: 400px) {
            .memory-board {
                grid-template-columns: repeat(3, 1fr);
            }
            .memory-card {
                height: 80px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="game-info">
            <div>翻牌次数: <span id="flips">0</span></div>
            <div>已匹配: <span id="matches">0</span>/8</div>
        </div>
        <div class="memory-board" id="memoryBoard"></div>
        <button class="restart-btn" id="restartBtn">重新开始</button>
    </div>
    <div class="game-over" id="gameOver">
        <div class="game-over-content">
            <h2>恭喜你赢了!</h2>
            <p>你用了 <span id="finalFlips">0</span> 次翻牌</p>
            <button class="restart-btn" id="playAgainBtn">再玩一次</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const cardSymbols = ['🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓'];
            let gameCards = [...cardSymbols, ...cardSymbols];
            let hasFlippedCard = false;
            let lockBoard = true;
            let firstCard, secondCard;
            let flips = 0;
            let matches = 0;

            const memoryBoard = document.getElementById('memoryBoard');
            const flipsCounter = document.getElementById('flips');
            const matchesCounter = document.getElementById('matches');
            const restartBtn = document.getElementById('restartBtn');
            const gameOverScreen = document.getElementById('gameOver');
            const finalFlips = document.getElementById('finalFlips');
            const playAgainBtn = document.getElementById('playAgainBtn');

            // 洗牌函数 (Fisher-Yates算法)
            function shuffle(array) {
                let currentIndex = array.length;
                let temporaryValue, randomIndex;

                while (currentIndex !== 0) {
                    randomIndex = Math.floor(Math.random() * currentIndex);
                    currentIndex -= 1;
                    temporaryValue = array[currentIndex];
                    array[currentIndex] = array[randomIndex];
                    array[randomIndex] = temporaryValue;
                }
                return array;
            }

            // 创建游戏卡片
            function createCards() {
                memoryBoard.innerHTML = '';
                gameCards = shuffle([...cardSymbols, ...cardSymbols]);

                gameCards.forEach((symbol, index) => {
                    const card = document.createElement('div');
                    card.classList.add('memory-card');
                    card.dataset.symbol = symbol;
                    card.dataset.index = index;

                    card.innerHTML = `
                        <div class="front-face">${symbol}</div>
                        <div class="back-face">?</div>
                    `;

                    memoryBoard.appendChild(card);
                    card.addEventListener('click', flipCard);
                });

                lockBoard = false;
            }

            // 翻转卡片
            function flipCard() {
                if (lockBoard) return;
                if (this === firstCard) return;

                this.classList.add('flip');

                if (!hasFlippedCard) {
                    // 第一次点击
                    hasFlippedCard = true;
                    firstCard = this;
                    return;
                }

                // 第二次点击
                secondCard = this;
                flips++;
                flipsCounter.textContent = flips;

                checkForMatch();
            }

            // 检查匹配
            function checkForMatch() {
                const isMatch = firstCard.dataset.symbol === secondCard.dataset.symbol;

                if (isMatch) {
                    disableCards();
                    matches++;
                    matchesCounter.textContent = matches;

                    if (matches === cardSymbols.length) {
                        endGame();
                    }
                } else {
                    unflipCards();
                }
            }

            // 匹配成功，禁用卡片
            function disableCards() {
                firstCard.classList.add('matched');
                secondCard.classList.add('matched');

                firstCard.removeEventListener('click', flipCard);
                secondCard.removeEventListener('click', flipCard);

                resetBoard();
            }

            // 不匹配，翻回卡片
            function unflipCards() {
                lockBoard = true;

                setTimeout(() => {
                    firstCard.classList.remove('flip');
                    secondCard.classList.remove('flip');
                    resetBoard();
                }, 1000);
            }

            // 重置游戏板状态
            function resetBoard() {
                [hasFlippedCard, lockBoard] = [false, false];
                [firstCard, secondCard] = [null, null];
            }

            // 游戏结束
            function endGame() {
                lockBoard = true;
                setTimeout(() => {
                    finalFlips.textContent = flips;
                    gameOverScreen.style.display = 'flex';
                }, 500);
            }

            // 重新开始游戏
            function restartGame() {
                [flips, matches] = [0, 0];
                flipsCounter.textContent = flips;
                matchesCounter.textContent = matches;
                gameOverScreen.style.display = 'none';
                resetBoard();
                createCards();
            }

            // 事件监听
            restartBtn.addEventListener('click', restartGame);
            playAgainBtn.addEventListener('click', restartGame);

            // 初始化游戏
            createCards();
        });
    </script>
</body>
</html>